<template>
  <div class="ape-admin-container">
    <section class="ape-admin-layout" scroll>
      <el-form :model="form" label-width="100px" :disabled="true">
        <el-row>
          <el-col :span="24">
            <el-form-item size="mini" label-width="0">
              <el-alert title="服务配置" type="error" :closable="false" center>
              </el-alert>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="启动端口" prop="port">
              <el-tag type="danger">{{ format(form.port) }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item size="mini" label-width="0">
              <el-alert
                title="数据库配置"
                type="success"
                :closable="false"
                center
              >
              </el-alert>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="连接限制" prop="dbPool.connectionLimit">
              <el-tag type="success">{{
                format(form.dbPool.connectionLimit)
              }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="主机地址" prop="dbPool.host">
              <el-tag type="success">{{ format(form.dbPool.host) }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时区配置" prop="dbPool.timezone">
              <el-tag type="success">{{ format(form.dbPool.timezone) }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户账号" prop="dbPool.user">
              <el-tag type="success">{{ format(form.dbPool.user) }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户密码" prop="dbPool.password">
              <el-tag type="success">{{ format(form.dbPool.password) }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数据库" prop="dbPool.database">
              <el-tag type="success">{{ format(form.dbPool.database) }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 配置信息
      form: {
        dbPool: {},
      },
    };
  },

  created() {},

  methods: {
    format(e) {
      if (e) {
        return `  ${e}  `;
      } else {
        return "暂无数据";
      }
    },
  },
};
</script>
